<template>
  <div class="login-container">
    <el-form class="login-form" auto-complete="on"
             label-position="left">

      <div>
        <div v-bind:hidden="hidden1">
          <img src="../../assets/tigerHome.gif" width="100%" style="position: relative">
        </div>
        <div v-bind:hidden="hidden2">
          <img src="../../assets/gameover.jpg" width="100%" style="position: relative">
        </div>
        <div v-bind:hidden="hidden2" style="position: absolute;margin-top: -400px;margin-left: 50px;font-size: 20px;color: aqua">
          <p>时光一去永不回，</p><p>小老虎走了就不会再回来</p>
          <p>这年你自己过吧~~</p>
          <p>记住偷你饺子的坏人们</p>

          <p>最后还是得祝您【新年快乐】~</p>
        </div>


        <div style="position: absolute;margin-top: -120px;margin-left: 10px;color: #001528">

          <p>{{nianData.nianName}}</p>
          <p>&nbsp;&nbsp;饥饿值：{{nianData.hungryNum}}</p>
          <p>&nbsp;&nbsp;饺子数：{{nianData.dumplingsNum}}</p>
        </div>
        <div style="position: absolute;margin-top: -520px;margin-left: 10px">
          <el-button type="danger" style="width:100%;margin-bottom:30px;"
                     @click.native.prevent="stealDumplings">谁偷了我的饺子
          </el-button>
        </div>
        <div style="position: absolute;margin-top: -520px;margin-left: 160px">
          <el-button type="danger" style="width:100%;margin-bottom:30px;"
                     @click.native.prevent="sayLog">说话记录
          </el-button>
        </div>
        <div style="position: absolute;margin-top: -520px;margin-left: 270px">
          <el-button type="danger" style="width:100%;margin-bottom:30px;"
                     @click.native.prevent="whereToGoLog">串门收获
          </el-button>
        </div>
        <div style="position: absolute;margin-top: -520px;margin-left: 440px">
          <el-button type="danger" style="width:100%;margin-bottom:30px;"
                     @click.native.prevent="byeBye">离开
          </el-button>
        </div>
        <div class="talkbubble"
             style="position: absolute;margin-left: 400px;margin-top: -250px;width: 120px;display: flex;align-items: center;"
             v-show="tigerTalk">
          <span style="margin: 10px;">
            {{tigerSay}}
          </span>
        </div>
      </div>
      <el-dialog title="串门收获" :visible.sync="whereToGoVisible" style="width: 100%">
        <span style="font-size: 14px;font-family: 黑体;color: #20a0ff">只能记录前15条我去过谁家，多了我也记不住哦~~</span><br>
        <hr>
        <ul id="example-4">
          <li v-for="(item, index) in whereToGoList">
            <p>{{item.createTime}}  {{item.description}}</p>
          </li>
        </ul>
        <div slot="footer" class="dialog-footer">
          <el-button @click="whereToGoVisible = false">关 闭</el-button>
        </div>
      </el-dialog>

      <el-dialog title="我的说话记录" :visible.sync="sayLogVisible" style="width: 100%">
        <span style="font-size: 14px;font-family: 黑体;color: #20a0ff">只能记录前15条我说过的话，多了我也记不住哦~~</span><br>
        <hr>
        <ul id="example-3">
          <li v-for="(item, index) in sayLogList">
            <p>{{item.createTime}}  {{item.nianWords}}</p>
          </li>
        </ul>
        <div slot="footer" class="dialog-footer">
          <el-button @click="sayLogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>

      <el-dialog title="谁偷了我的饺子" :visible.sync="stealDumplingsVisible" style="width: 100%">
        <span style="font-size: 14px;font-family: 黑体;color: #20a0ff">只能记录前15天偷我饺子的坏人，多了我也记不住哦~~</span><br>
        <hr>
        <span style="font-size: 14px;font-family: 黑体;color: #20a0ff">偷饺子top5:</span>
        <ul id="example-1">
          <li v-for="(item, index) in top5">
            <span style="color: #85ce61">{{item.whoSteal}}</span> 总共偷了我【<span style="color: #85ce61"> {{item.stealNum}}</span>】个饺子
          </li>
        </ul>
        <span style="font-size: 14px;font-family: 黑体;color: #20a0ff">最近偷饺子的人:</span>
        <ul id="example-2">
          <li v-for="(item, index) in thief">
            <span style="color: #85ce61">{{item.whoSteal}}</span> 偷了我的【<span style="color: #85ce61"> {{item.dumplingsName}}</span>】
          </li>
        </ul>
        <div slot="footer" class="dialog-footer">
          <el-button @click="stealDumplingsVisible = false">关 闭</el-button>
        </div>
      </el-dialog>

      <el-dialog title="主人请说" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item>
            <el-input v-model="userWords" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false" @click.native.prevent="createWords">确 定
          </el-button>
        </div>
      </el-dialog>

      <div v-bind:hidden="hidden1">
        <el-button  :disabled="loading1" type="primary" style="width:24%;margin-bottom:30px;"
                    @click.native.prevent="sayHappyNewYear">过年好
        </el-button>
        <el-button  :disabled="loading2" type="primary" style="width:24%;margin-bottom:30px;"
                    @click.native.prevent="eatDumplings">吃饺子
        </el-button>
        <el-button  :disabled="loading3" type="primary" style="width:23%;margin-bottom:30px;"
                    @click.native.prevent="learnWords">学说话
        </el-button>
        <el-button  :disabled="loading4" type="primary" style="width:23%;margin-bottom:30px;"
                    @click.native.prevent="whereToGo">去串门
        </el-button>
      </div>

    </el-form>
  </div>
</template>


<script>
  import {setToken, getToken, getUsername, removeToken,} from '@/utils/auth'
  import axios from 'axios'

  export default {
    name: 'Login',
    data() {
      return {
        whereToGoVisible: false,
        whereToGoList: null,
        sayLogVisible: false,
        sayLogList: null,
        thief: null,
        top5: null,
        stealDumplingsVisible: false,
        userWords: null,
        dialogFormVisible: false,
        tigerTalk: false,
        username: null,
        nianData: null,
        tigerSay: "好想你啊主人，你终于来啦~~",
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        hidden1: 'hidden',
        hidden2: 'hidden',
      }
    },
    created() {
      this.username = getUsername();
      this.nianData = JSON.parse(getToken());
      this.init();
      this.getNian();
      this.showWelcome();
    },
    methods: {
      init() {
        setInterval(this.getNian, 600000);
      },
      whereToGoLog(){
        this.whereToGoVisible = true;
        const self = this;
        axios.get(process.env.VUE_APP_BASE_API + '/nianwheretogo/list?nianId=' + this.nianData.id)
          .then(function (response) {
            self.whereToGoList = response.data.data;
          })
          .catch(function (error) {
          });
      },
      save(nianWords){
        axios.post(process.env.VUE_APP_BASE_API + '/niansaylog/save',{
          nianId: this.nianData.id,
          nianWords: nianWords
        });
      },
      eatDumplings() {
        const self = this;
        axios.post(process.env.VUE_APP_BASE_API + '/niandumplings/eatDumplings', {
          nianId: this.nianData.id,
        })
          .then(function (response) {
            if (response.data.code === 205) {
              self.tigerSay = response.data.msg;
              self.save(self.tigerSay)
              self.showWelcome();
            }
            if (response.data.code === 0) {
              self.tigerSay = response.data.msg;
              self.save(self.tigerSay)
              self.showWelcome();
            }

            self.getNian()
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      getNian() {
        const self = this;
        axios.get(process.env.VUE_APP_BASE_API + '/nian/info/getById?id=' + this.nianData.id)
          .then(function (response) {
            if (response.data.code === 0) {
              self.nianData.hungryNum = response.data.data.hungryNum;
              self.nianData.dumplingsNum = response.data.data.dumplingsNum;
              setToken(self.nianData)
              self.hidden1 = null;
            }
            if (response.data.code == 206) {
              self.hidden1 = 'hidden';
              self.hidden2 = null;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      showWelcome() {
        this.tigerTalk = true;
        setTimeout(this.closeWelcome, 5000);
      },
      closeWelcome() {
        this.tigerTalk = false;

      },
      learnWords() {
        this.tigerTalk = true;
        this.tigerSay = "好啊，主人你说一句，我来学一句~~";
        setTimeout(this.writeWords, 1000);
      },

      writeWords() {
        this.dialogFormVisible = true;
      },
      byeBye() {
        removeToken();
        this.$router.push({path: '/login'})
      },
      sayHappyNewYear() {
        this.loading1 = true;
        const self = this;
        axios.get(process.env.VUE_APP_BASE_API + '/nianwords/info/getRandom?nianId=' + this.nianData.id)
          .then(function (response) {
            if (response.data.code === 0) {
              self.tigerSay = response.data.data.nianWords;
            } else {
              self.tigerSay = response.data.msg;
            }
            self.save(self.tigerSay)
            self.showWelcome();
            //setTimeout(self.closeWelcome, 3000);
            self.loading1 = false
          })
          .catch(function (error) {
            console.log(error);
          });

      },
      whereToGo() {
        this.loading4 = true;
        const self = this;
        axios.get(process.env.VUE_APP_BASE_API + '/nianwheretogo/whereToGo?nianId=' + this.nianData.id)
          .then(function (response) {
            self.tigerSay = response.data.msg;
            self.save(self.tigerSay)
            self.showWelcome();
            // setTimeout(self.closeWelcome, 3000);
            self.loading4 = false

            self.getNian();
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      createWords() {
        const self = this;
        if (this.userWords.length > 50) {
          self.tigerSay = "主人你说的太多了，我记不住啊";
          self.showWelcome();
          setTimeout(self.closeWelcome, 2000);
        } else {
          axios.post(process.env.VUE_APP_BASE_API + '/nianwords/save', {
            nianId: this.nianData.id,        // 参数 firstName
            nianWords: this.userWords,
            wordsFrom: this.username,
          })
            .then(function (response) {
              if (response.data.code === 0) {
                self.userWords = null;
                self.tigerSay = "我记住啦";
                self.showWelcome();
              }
              if (response.data.code === 200) {
                self.userWords = null;
                self.tigerSay = "我记住啦,并且" + response.data.msg;
                self.showWelcome();
              }
              self.save(self.tigerSay)
              self.getNian();
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      stealDumplings() {
        this.stealDumplingsVisible = true;
        const self = this;
        axios.get(process.env.VUE_APP_BASE_API + '/nianstealdumplingslog/list?nianId=' + this.nianData.id)
          .then(function (response) {
            self.thief = response.data.data.stealUser;
            self.top5 = response.data.data.top5;
          })
          .catch(function (error) {
          });
      },

      sayLog() {
        this.sayLogVisible = true;
        const self = this;
        axios.get(process.env.VUE_APP_BASE_API + '/niansaylog/list?nianId=' + this.nianData.id)
          .then(function (response) {
            self.sayLogList = response.data.data;
          })
          .catch(function (error) {
          });
      }
    }
  }
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: #fff;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 600px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }

  .talkbubble {
    width: 120px;
    height: 120px;
    background: bisque;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }

  .talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid bisque;
    border-bottom: 13px solid transparent;
  }
</style>
